<style lang="scss" scoped>
    .head{
        width: 100vw;
        height: 25vh;
        padding-bottom: 10vh;
        background-image: linear-gradient(to bottom, rgb(50, 134, 255), rgb(29, 70, 245));
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        img{
            height: 10vh;
            border-radius: 5vh;
        }
        div{
            position: absolute;
            &:nth-child(2){
                width: 111px;
                height: 200px;
                background-color: #fff;
                top: 160px;
                border-radius: 50%;
                left: -74px;
            }
            &:nth-child(3){
                width: 161px;
                height: 200px;
                background-color: #fff;
                top: 183px;
                border-radius: 50%;
                left: -15px;
            }
            &:nth-child(4){
                width: 227px;
                height: 200px;
                background-color: #fff;
                top: 186px;
                border-radius: 50%;
                left: 83px;
            }
            &:nth-child(5){
                width: 161px;
                height: 200px;
                background-color: #fff;
                top: 183px;
                border-radius: 50%;
                right: -6px;
            }
            &:nth-child(6){
                width: 111px;
                height: 200px;
                background-color: #fff;
                top: 169px;
                border-radius: 50%;
                right: -70px;
            }
        }
    }
    .detail{
        padding: 30px 10%;
        .list{
            display: flex;
            height: 44px;
            margin-bottom: 15px;
            position: relative;
            &::after{
                position: absolute;
                content: '';
                width: 195vw;
                height: 1px;
                background-color: #d4d4d4;
                transform: scale(0.5);
                bottom: 0;
                left: -72%;
            }
            .logo{
                width: 44px;
                height: 44px;
                display: flex;
                align-items: center;
                img{
                    height: 30px;
                }
            }
            .input{
                width: calc(100% - 144px);
                display: flex;
                align-items: center;
                input{
                    border: 0;
                    outline: 0;
                }
            }
            .verfy{
                width: 100px;
                height: 44px;
            }
        }
    }
    .btn{
        margin-top: 30px;
        text-align: center;
    }
    .toast{
        text-align: center;
        color: #2d8cf0;
        &:active{
            color: #055cb8;
            text-decoration: underline;
        }
    }
</style>
<template>
    <div class="login">
        <div class="head">
            <img src="../../static/logo.jpg" alt="">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="detail">
            <div class="list">
                <div class="logo">
                    <img src="../../static/user/phone.png" alt="">
                </div>
                <div class="input">
                    <input type="text" v-model="objPage.loginPhone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="list">
                <div class="logo">
                    <img src="../../static/user/password.png" alt="">
                </div>
                <div class="input">
                    <input type="password" v-model="objPage.loginPassword" placeholder="请输入密码">
                </div>
            </div>
            <div class="list">
                <div class="logo">
                    <img src="../../static/user/ercode.png" alt="">
                </div>
                <div class="input">
                    <input type="text" v-model="objPage.ercode" placeholder="验证码">
                </div>
                <div class="verfy"
                    @click="getImgCode()"
                    v-html="imgObj.data">
                    
                </div>
            </div>
            <div class="btn">
                <van-button 
                    round 
                    type="info"
                    :block="true"
                    @click="submit()">
                    登录
                </van-button>
            </div>
        </div>
        <div class="toast" @click="$router.push('/register')">
            没有账号，去注册
        </div>
    </div>
</template>

<script>
    // 引入api的接口文件 里的getCode接口
    import {
        // 引入获取验证码接口
        getCode,
        // 登录接口
        Login
    } from '@/api'
    export default {
        data() {
            return {
                // 验证码的 信息
                imgObj: {
                    data: '',
                    text: ''
                },
                //验证码的图片宽高
                imgStyle: {
                    width: 120,
                    height: 40
                },
                // 用户输入的账号和密码数据
                objPage: {
                    loginPhone: '',
                    loginPassword: '',
                    ercode: ''
                }
            }
        },
        // 创建后的生命周期
        created(){
            this.getImgCode();
        },
        // 事件
        methods: {
            getImgCode(){
                getCode(this.imgStyle).then(res => {
                    // 给验证码图片数据重新赋值
                    this.imgObj = res.data;
                })
            },
            submit(){
                // console.log(this.objPage);
                
                // 判断手机号是否合法
                if(!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.objPage.loginPhone)){
                    // 使用vant的轻提示
                    this.$toast('手机号不合符');
                    return
                }
                // 判断密码的长度 是否小于6位
                if(this.objPage.loginPassword.length < 6){
                    // 使用vant的轻提示
                    this.$toast('密码长度不能小于6位');
                    return
                }
                // 判断用户输入的验证码是否和图片里面的验证码一致
                if(this.objPage.ercode.toLocaleUpperCase() !== this.imgObj.text.toLocaleUpperCase()){
                    this.$toast('验证码错误');
                    return
                }
                // 所有验证都通过 请求登录接口
                Login(this.objPage).then(res => {
                    if(res.data.code == 0){
                        // 如果后端返回的code == 0 弹出后端返回的提示文字
                        this.$toast(res.data.msg);
                    }else{
                        // 需要一个有效字段 记录 用户已经登录
                        // 对于客户端有用的字段
                        // 把token存在 本地
                        // localStorage.setItem('token',res.data.result.token);

                        // 把token存在vuex中
                        this.$store.commit('changeToken',res.data.result.token)
                        // 把用户信息存在vuex中
                        this.$store.commit('changeUser', res.data.result)
                        // 提示语句
                        this.$toast({
                            message: res.data.msg,
                            duration: 1500,
                            closeOnClick: true,
                            onClose: () => {
                                // 跳转首页
                                this.$router.push('/home');
                            }
                        });
                    }
                })
            }
        }
    }
</script>